<template>
  <div class="tree-menu-container">
    <div class="menu-search">
      <el-input
        v-model="filterText"
        class="w-60 mb-2"
        placeholder="请输入名称进行搜索"
        clearable
        :prefix-icon="Search"
        @clear="clearFilter"
      />
    </div>
    <div>
      <el-tree
        ref="treeRef"
        style="min-width: 240px"
        class="filter-tree tree-with-lines"
        :data="props.treeData"
        highlight-current
        node-key="id"
        :indent="6"
        :expand-on-click-node="false"
        :default-expanded-keys="props.defaultExpandedKeys"
        :current-node-key="props.defaultSelectedKey"
        :filter-node-method="filterNode"
        @node-click="handleCheckChange"
      >
        <!-- 自定义节点内容 -->
        <template #default="{ node, data }">
          <div class="node-container">
            <span v-if="['0', '9999'].includes(data.id)" class="">{{
              data.name.zh_CN
            }}</span>
            <span v-else class="node-text">{{ data.name.zh_CN }}</span>
            <span
              class="node-menu"
              v-if="props.config?.homeCustom && data.isFolder"
              @click.stop="handleAddFile(data)"
            >
              <el-icon><Plus /></el-icon>
            </span>
            <span
              class="node-menu"
              v-else-if="props.config?.homeCustom"
              @click.stop="handleMoreAction(data, $event)"
            >
              <el-icon><MoreFilled /></el-icon>
            </span>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from "vue";
  import type { ElTree } from "element-plus";
  import { MoreFilled, Plus, Search } from "@element-plus/icons-vue";
  import type { ProjectNode } from "@/data/wbsData.ts";

  interface TreeMenuProps {
    treeData: ProjectNode[];
    config?: Record<any, any>;
    defaultExpandedKeys?: (string | number)[];
    defaultSelectedKey?: string | number;
  }

  const props = defineProps<TreeMenuProps>();
  const emit = defineEmits<{
    selectedNode: [data: ProjectNode];
    createNode: [data: any];
    editNode: [data: ProjectNode, args: any];
  }>();

  const filterText = ref("");
  const treeRef = ref<InstanceType<typeof ElTree>>();
  const selectedNode = ref<ProjectNode>();

  // 过滤方法
  const filterNode = (value: string, data: ProjectNode) => {
    if (!value) return true;
    return data.label.includes(value);
  };

  watch(filterText, (val) => {
    treeRef.value?.filter(val);
  });

  const clearFilter = () => {
    filterText.value = "";
    treeRef.value?.filter("");
  };

  // 节点点击事件
  const handleCheckChange = (data?: ProjectNode) => {
    selectedNode.value = data;
    console.log("树状菜单树节点被点击", data);
    emit("selectedNode", data);
  };
  //树状菜单树按钮
  const handleAddFile = (node: any) => {
    console.log("树状菜单树一级节点的添加按钮被点击", node);
    emit("createNode", node);
  };
  const handleMoreAction = (node: any, args: any) => {
    console.log("树状菜单树其他级节点的更多按钮被点击", args);
    emit("editNode", node, args);
  };
  // 暴露内部引用（可选）
  defineExpose({ treeRef });
</script>

<style scoped lang="scss">
  .tree-node-icon {
    margin-right: 5px;
    width: 18px;
    height: 18px;
  }
  .node-text {
    margin-left: 5px;
    width: 100%;
  }
  .menu-search {
    padding: 15px 12px;
  }

  :deep(.tree-with-lines .el-tree-node) {
    position: relative;
  }
  /* 让每层子节点继续缩进 */
  :deep(.tree-with-lines .el-tree-node__children) {
    margin-left: 10px; /* 与默认缩进一致 */
  }
  .node-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 15px;
  }
  .node-menu {
    height: 20px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;

    &:hover {
      color: #1aa1fb;
      background-color: #e8f1fb;
    }
  }
</style>
